<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>

<button class="btn">发送请求</button>

<script>
// 浏览器的同源策略限制了ajax跨域请求资源

// jsonp -> 跨域获取json数据
// jsonp其实就是利用script标签的跨域能力来获取数据

let btn = document.querySelector('.btn')
btn.onclick = function (){
    // 发送jsonp请求：

    // 1.创建script标签
    let Script = document.createElement('script')
    // 2.将数据接口赋值给Script的src属性
    Script.src = 'http://localhost:8080/goods/test2?callback=test'
    // 3.将script标签添加到页面中
    document.body.appendChild(Script)
    // 4.加载完成时删除script标签
    Script.onload = function (){
        this.remove()
    }

}

// 5.jsonp的回调函数（全局函数）
function test(res){
    console.log( 'test',res )
}
function hehe(res){
    console.log( 'hehe',res )
}
function haha(res){
    console.log( 'haha',res )
}
</script>
<!-- <script src="http://localhost:8080/goods/test2"></script> -->
</body>
</html>